<template>
  <div>
    <div class="equipContainner1">
      <el-row :gutter="20" class="seachnav">
        <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="5" class="navHeight">
          <span class="returnnormalpress" @click="goBack()"></span>
          <span><img :src="realtimeindex" class="equiplist"/></span>
          <span class="description">{{this.$route.query.title}} 监测信息</span>
        </el-col>
      </el-row>
    </div>
    <div class="detection-containner">
    <!--<div class="equipNav clearfix">-->
      <!--<div class="leftTop">-->
        <!--<p class="leftTitle">监测信息</p>-->
      <!--</div>-->
      <!--<div class="rightBtn" @click="goBack()">-->
        <!--< 返回-->
      <!--</div>-->
    <!--</div>-->
    <div class="tableCantent">
      <div class="firsrTableSearch">
        <el-form :inline="true"  class="demo-form-inline"  size="mini" >
          <el-form-item label="整机状态">
          </el-form-item>
        </el-form>
      </div>
      <div class="firstTable">
        <el-table
          :data="TotalData"
          stripe fit highlight-current-row
          style="width: 100%; max-height:520px; overflow-y: auto"
          :header-cell-style="{background:'#D8DEE8'}"
          :row-class-name = "tableRowClass"
        >
          <el-table-column
            v-for="(column, index) in Total"
            :prop="column.prop"
            :label="column.label"
            :key="index"
            :sortable="column.sortable"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="tableCantent">
      <div class="firsrTableSearch">
        <el-form :inline="true"  class="demo-form-inline"  size="mini" >
          <el-form-item label="起升机构">
          </el-form-item>
        </el-form>
      </div>
      <div class="firstTable">
        <el-table
          :data="mainHeightData"
          border
          stripe border fit highlight-current-row
          style="width: 100%; max-height:520px; overflow-y: auto"
          :header-cell-style="{background:'#D8DEE8'}"
          :row-class-name = "tableRowClass"
        >
          <el-table-column
            v-for="(column, index) in mainHeight"
            :prop="column.prop"
            :label="column.label"
            :key="index"
            :sortable="column.sortable">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="tableCantent">
      <div class="firsrTableSearch">
        <el-form :inline="true"  class="demo-form-inline"  size="mini" >
          <el-form-item label="小车机构">
          </el-form-item>
        </el-form>
      </div>
      <div class="firstTable">
        <el-table
          :data="smallCardData"
          border
          stripe border fit highlight-current-row
          style="width: 100%; max-height:520px; overflow-y: auto"
          :header-cell-style="{background:'#D8DEE8'}"
          :row-class-name = "tableRowClass"
        >
          <el-table-column
            v-for="(column, index) in smallCar"
            :prop="column.prop"
            :label="column.label"
            :key="index"
            :sortable="column.sortable">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="tableCantent">
      <div class="firsrTableSearch">
        <el-form :inline="true"  class="demo-form-inline"  size="mini" >
          <el-form-item label="大车机构">
          </el-form-item>
        </el-form>
      </div>
      <div class="firstTable">
        <el-table
          :data="bigCardData"
          border
          stripe border fit highlight-current-row
          style="width: 100%; max-height:520px; overflow-y: auto"
          :header-cell-style="{background:'#D8DEE8'}"
          :row-class-name = "tableRowClass"
        >
          <el-table-column
            v-for="(column, index) in bigCar"
            :prop="column.prop"
            :label="column.label"
            :key="index"
            :sortable="column.sortable">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import returandisabled from '@/assets/equipv2/returandisabled.png'
  import realtimeindex from '@/assets/home/realtimeindex.png'
  export default {
    name: 'detectionInfo',
    data() {
      return {
        returandisabled,
        realtimeindex,
        pid: localStorage.getItem('num'),
        plcNumber: localStorage.getItem('plc'), // 设备编号
        bigCardData: [],
        smallCardData: [],
        mainHeightData: [],
        TotalData: [],
        bigCar: [
          { prop: 'id', label: '编号', width: '260px', sortable: true },
          { prop: 'name', label: '名称', sortable: true },
          { prop: 'dtype', label: '数据类型', width: '210', sortable: true },
          { prop: 'value1', label: '显示数据', width: '220px' },
          { prop: 'value2', label: '原始数据', width: '220px' },
          { prop: 'value3', label: '状态', width: '110px', sortable: true },
          { prop: 'occurrence_time', label: '更新时间', width: '217px' }
        ],
        smallCar: [
          { prop: 'id', label: '编号', width: '260px', sortable: true },
          { prop: 'name', label: '名称', sortable: true },
          { prop: 'dtype', label: '数据类型', width: '210', sortable: true },
          { prop: 'value1', label: '显示数据', width: '220px' },
          { prop: 'value2', label: '原始数据', width: '220px' },
          { prop: 'value3', label: '状态', width: '110px', sortable: true },
          { prop: 'occurrence_time', label: '更新时间', width: '217px' }
        ],
        mainHeight: [
          { prop: 'id', label: '编号', width: '260px', sortable: true },
          { prop: 'name', label: '名称', sortable: true },
          { prop: 'dtype', label: '数据类型', width: '210', sortable: true },
          { prop: 'value1', label: '显示数据', width: '220px' },
          { prop: 'value2', label: '原始数据', width: '220px' },
          { prop: 'value3', label: '状态', width: '110px', sortable: true },
          { prop: 'occurrence_time', label: '更新时间', width: '217px' }
        ],
        Total: [
          { prop: 'id', label: '编号', width: '260px', sortable: true },
          { prop: 'name', label: '名称', sortable: true },
          { prop: 'dtype', label: '数据类型', width: '210', sortable: true },
          { prop: 'value1', label: '显示数据', width: '220px' },
          { prop: 'value2', label: '原始数据', width: '220px' },
          { prop: 'value3', label: '状态', width: '110px', sortable: true },
          { prop: 'occurrence_time', label: '更新时间', width: '217px' }
        ],
        // 大车
        submitbigCard: {
          access_token: window.localStorage.getItem('access_token'),
          'type': 'actual_real',
          'pid': '',
          'datas': []
        },
        // 小车
        submitsmallCard: {
          access_token: window.localStorage.getItem('access_token'),
          'type': 'actual_real',
          'pid': '',
          'datas': []
        },
        // 主起升
        submitMainHight: {
          access_token: window.localStorage.getItem('access_token'),
          'type': 'actual_real',
          'pid': '',
          'datas': []
        },
        // 抓斗数据
        submitTotal: {
          access_token: window.localStorage.getItem('access_token'),
          'type': 'actual_real',
          'pid': '',
          'datas': []
        }
      }
    },
    mounted() {
      this.queryBigCard()
      this.querySmallCard()
      this.queryMain()
      this.queryTotal()
      this.A()
    },
    methods: {
      // 返回页面
      goBack() {
        this.$router.push({ path: '/monitor/homepage/grab' })
        
      },
      // 定时请求
      A: function() {
        this.intervalObj = setInterval(() => {
          this.queryBigCard()
          this.querySmallCard()
          this.queryMain()
          this.queryTotal()
          // console.log(this.$router)
        }, 3000)
      },
      // 获取大车数据
      queryBigCard() {
        this.submitbigCard.pid = this.pid
        this.submitbigCard.datas = [this.pid + '.' + this.plcNumber + '.31']
        axios.post('/data', this.submitbigCard, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          // console.log(res)
          this.bigCardData = res.data.datas
          for (var i = 0; i < res.data.datas.length; i++) {
            if (res.data.datas[i].value3 === '0') {
              this.bigCardData[i].value3 = '正常'
            } else {
              this.bigCardData[i].value3 = '异常'
            }
            if (res.data.datas[i].dtype === 'analog') {
              this.bigCardData[i].dtype = '模拟量'
            } else {
              this.bigCardData[i].dtype = '状态量'
            }
          }
          // console.log(this.bigCardData)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取小车车数据
      querySmallCard() {
        this.submitsmallCard.pid = this.pid
        this.submitsmallCard.datas = [this.pid + '.' + this.plcNumber + '.21']
        axios.post('/data', this.submitsmallCard, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.smallCardData = res.data.datas
          for (var i = 0; i < res.data.datas.length; i++) {
            if (res.data.datas[i].value3 === '0') {
              this.smallCardData[i].value3 = '正常'
            } else {
              this.smallCardData[i].value3 = '异常'
            }
            if (res.data.datas[i].dtype === 'analog') {
              this.smallCardData[i].dtype = '模拟量'
            } else {
              this.smallCardData[i].dtype = '状态量'
            }
          }
          // console.log(res)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取主起升数据
      queryMain() {
        this.submitMainHight.pid = this.pid
        this.submitMainHight.datas = [this.pid + '.' + this.plcNumber + '.11']
        axios.post('/data', this.submitMainHight, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.mainHeightData = res.data.datas
          for (var i = 0; i < res.data.datas.length; i++) {
            if (res.data.datas[i].value3 === '0') {
              this.mainHeightData[i].value3 = '正常'
            } else {
              this.mainHeightData[i].value3 = '异常'
            }
            if (res.data.datas[i].dtype === 'analog') {
              this.mainHeightData[i].dtype = '模拟量'
            } else {
              this.mainHeightData[i].dtype = '状态量'
            }
          }
          // console.log(res)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取整机数据
      queryTotal() {
        this.submitTotal.pid = this.pid
        this.submitTotal.datas = [this.pid + '.' + this.plcNumber + '.10']
        axios.post('/data', this.submitTotal, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.TotalData = res.data.datas
          for (var i = 0; i < res.data.datas.length; i++) {
            if (res.data.datas[i].value3 === '0') {
              this.TotalData[i].value3 = '正常'
            } else {
              this.TotalData[i].value3 = '异常'
            }
            if (res.data.datas[i].dtype === 'analog') {
              this.TotalData[i].dtype = '模拟量'
            } else {
              this.TotalData[i].dtype = '状态量'
            }
          }
          // console.log(res)
        })
          .catch(function(error) {Total
            console.log(error)
          })
      },
      tableRowClass({row, rowIndex}) {
        // console.log(row)
        if (row.value3 === '异常') {
          return 'abnormal'
        }
      },
    },
    destroyed: function() {
      clearInterval(this.intervalObj)
    },
    
  }

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .equipContainner1 {
    width: 100%;
    /*min-height: 53vw;*/
    background-color: #EFEFEF;
    .seachnav {
      width: 100%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top: 0;
      bottom: 0;
      line-height: 50px;
      padding-left: 20px;
      .navHeight {
        height: 60px;
        .description{
          font-size: 18px;
          color: #333;
          vertical-align: -webkit-baseline-middle;
          line-height: 10px;
          padding-left: 10px;
        }
        .returnnormalpress {
          display: inline-block;
          width: 20px;
          height: 20px;
          vertical-align: -webkit-baseline-middle;
          cursor: pointer;
          background-image: url('../../assets/equipv2/returnnormalpress.png');
        }
        .returnnormalpress:hover {
          background-image: url('../../assets/equipv2/returnHover.png');
        }
        .equiplist {
          vertical-align: -webkit-baseline-middle;
          margin-left: 15px;
        }
      }
      .con {
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;
        .seachContent {
          font-size: 18px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          line-height: 60px;
          margin: 0 0 0 -46px;
          color: rgba(51, 51, 51, 1);
        }
        .seachtitle {
          font-size: 12px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
      }
    }
  }
  /********头部样式********/
  .detection-containner{
    width: 100%;
    min-height: 500px;
    padding-bottom: 30px;
    font-size: 16px;
    color: #25B6C7;
    .equipNav{
      width: 97%;
      height: 50px;
      margin-left: 20px;
      border-bottom: 1px solid #E4E9EF;
      .leftTop{
        width: 50%;
        height: 50px;
        float: left;
        font-size:16px;
        font-weight:400;
        color:rgba(50,56,66,1);
      .leftTitle{
        font-size: 16px;
        color: #676A70;
        padding-left: 5px;
        border-left: 5px solid #25B6C7;
        height: 16px;
      }
      }
      .rightBtn{
        float: right;
        font-size:14px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(37,183,200,1);
        cursor: pointer;
        margin: 15px 7px 0 0 ;
      }
      .clearfix:after{
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }
  }
  /**************表格样式***************/
  .tableCantent{
    margin-top: 20px;
    margin-left: 20px;
  }
  .firstTable{
    width: 98%;
  }
  .firsrTableSearch{
    width: 98%;
    height: 40px;
    background-color: #F0F3F5;
    font-size:14px;
    font-weight:400;
    color:#323842;
    text-indent: 10px;
    line-height: 40px;
  }
  /**************表格内容样式***************/
  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #FAFAFA;
  }
  /deep/  .el-form--inline .el-form-item__content {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/ .el-table--border th, .el-table__fixed-right-patch{
    padding: 3px 0;
  }
 /deep/ .el-table__row {
     &.abnormal {
       color: #f43b42;
     }
  }
</style>
